import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  AmbientLight,
  AxesHelper,
  GridHelper,
  PlaneBufferGeometry,
  DoubleSide,
  Color,
  MeshPhysicalMaterial,
  PointLight,
  PMREMGenerator,
  PlaneGeometry,
  ACESFilmicToneMapping,
  sRGBEncoding,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Sky } from "three/examples/jsm/objects/Sky";
import Stats from "three/examples/jsm/libs/stats.module";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment";
import { Vector3 } from "three";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let control: OrbitControls;
let stats: Stats;
let sun, sky;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.set(5, 5, 5);

  scene = new Scene();
  scene.background = new Color("#eee");
  //   add lights
  let ambientLight = new AmbientLight("#fff", 0.1);
  scene.add(ambientLight);
  
  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
//   renderer.outputEncoding = sRGBEncoding;
  renderer.toneMapping = ACESFilmicToneMapping;
  renderer.toneMappingExposure = 0.5;

  let cube = new BoxBufferGeometry(1, 1, 1);
  let material = new MeshBasicMaterial({ color: "#f00" });
  let mesh = new Mesh(cube, material);
  scene.add(mesh);

  sky = new Sky();
  sky.scale.setScalar(450000);
  scene.add(sky);

  const effectController = {
    turbidity: 10,
    rayleigh: 3,
    mieCoefficient: 0.005,
    mieDirectionalG: 0.7,
    inclination: 0.49, // elevation / inclination
    azimuth: 0.25, // Facing front,
    exposure: renderer.toneMappingExposure,
  };
  sun = new Vector3();

  function guiChanged() {
    const uniforms = sky.material.uniforms;
    uniforms["turbidity"].value = effectController.turbidity;
    uniforms["rayleigh"].value = effectController.rayleigh;
    uniforms["mieCoefficient"].value = effectController.mieCoefficient;
    uniforms["mieDirectionalG"].value = effectController.mieDirectionalG;

    const theta = Math.PI * (effectController.inclination - 0.5);
    const phi = 2 * Math.PI * (effectController.azimuth - 0.5);

    sun.x = Math.cos(phi);
    sun.y = Math.sin(phi) * Math.sin(theta);
    sun.z = Math.sin(phi) * Math.cos(theta);

    uniforms["sunPosition"].value.copy(sun);

    renderer.toneMappingExposure = effectController.exposure;
    renderer.render(scene, camera);
  }
  guiChanged();

  document.body.appendChild(renderer.domElement);
  control = new OrbitControls(camera, renderer.domElement);
  stats = Stats();
  document.body.appendChild(stats.domElement);
  //   let roomEnvironment = new RoomEnvironment();
  //   let pmremGenerator = new PMREMGenerator(renderer);
  //   scene.environment = pmremGenerator.fromScene(roomEnvironment).texture;
}

function animate() {
  requestAnimationFrame(animate);

  stats.update();
  renderer.render(scene, camera);
}
